﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初二九班智能点名系统</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

<body style="background: url(https://xyangj.gitee.io/lxy0/2222.jpg) fixed no-repeat; background-size: cover;">

<style>
body {
	background-repeat:no-repeat;
}
#big {
	width:1300px;
	margin:50px 50px;
	position:relative;
}
table {
	height:400px;
	background-color:rgba(255,222,173);
	border:2px solid #333333;
	padding:10px;
	border-collapse:collapse;
	border-spacing:0;
	font-size:20px;
	font-weight:bold;
}
table td {
	width:100px;
	border:1px solid #333333;
	text-align:center;
}
input {
	width:120px;
	height:60px;
	background-color:rgba(255,192,203);
	font-size:14px;
	border-radius:25px;
}
#only {
	position:absolute;
	right:140px;
	top:100px;
}
#stop1 {
	position:absolute;
	right:10px;
	top:100px;
}
#boy {
	position:absolute;
	right:140px;
	top:200px;
}
#stop2 {
	position:absolute;
	right:10px;
	top:200px;
}
#girl {
	position:absolute;
	right:140px;
	top:300px;
}
#stop3 {
	position:absolute;
	right:10px;
	top:300px;
}
#group {
	position:absolute;
	right:140px;
	top:400px;
}
#stop4 {
	position:absolute;
	right:10px;
	top:400px;
}
</style>
</head>
<body>
<div id="big">
    <table>
        <caption>
            <h1>初二九班智能点名系统</h1>
        </caption>
        <tbody id="all">
            <tr>
                <td class="name boy">单元格</td>
                <td class="name boy">周鸣杰</td>
                <td class="name girl">马思宇</td>
                <td class="name girl">孙粲然</td>
                <td class="name boy">段昊宇</td>
                <td class="name girl">欧亚玄</td>
                <td class="name girl">于思佳</td>
                <td class="name girl">王子涵</td>
                <td class="name girl">潘馨然</td>
            </tr>

            <tr>
                <td class="name girl">王奥</td>
                <td class="name girl">俞佳怡</td>
                <td class="name boy">刘志远</td>
                <td class="name girl">孟令爽</td>
                <td class="name girl">吴雨涵</td>
               
                <td class="name boy">狄禹廷</td>
                <td class="name girl">梁喜晴</td>
                <td class="name boy">高宏伟</td>
                <td class="name girl">秦佳萍</td>
            </tr>

            <tr>
              
                <td class="name girl">赵雨涵</td>
                <td class="name girl">赵雨鑫</td>
                <td class="name boy">段星宇</td>
                <td class="name girl">丁姝涵</td>
                <td class="name boy">张晰然</td>
                <td class="name girl">于佳琪</td>
                <td class="name boy">姜海峰</td>
                <td class="name girl">罗语晨</td>
                 <td class="name boy">王皓</td>
            </tr>

            <tr>
                <td class="name girl">冯蕾</td>
                <td class="name boy">张金硕</td>
                <td class="name boy">高瑞一</td>
                <td class="name boy">苏圣恺</td>
                <td class="name boy">肖俊呈</td>
                <td class="name boy">刘铁铮</td>
                <td class="name boy">刘加旭</td>
                <td class="name boy">陈宏达</td>
                <td class="name girl">乔春雨</td>
            </tr>

            <tr>
                <td class="name boy">张铭椿</td>
                <td class="name boy">王檄</td>
                <td class="name girl">白格</td>
                <td class="name girl">王诗琪</td>
                <td class="name boy">李亚璇</td>
                <td class="name boy">刘兴阳</td>
                <td class="name boy">关宇驰</td>
                <td class="name girl">裴欣萌</td>
                <td class="name girl">叶小冉</td>
            </tr>

            <tr>
                <td class="name girl">王子萱</td>
                <td class="name girl">王依硕</td>
                <td class="name boy">李思辰</td>
                <td class="name girl">苗雨嘉</td>
                <td class="name boy">孙晟恺</td>
                
            </tr>

        </tbody>
    </table>
    <input type="button" value="随机选择" id="only">
    <input type="button" value="选择男生" id="boy">
    <input type="button" value="选择女生" id="girl">
    <input type="button" value="选择一组" id="group">
    <input type="button" value="停止" id="stop1">
    <input type="button" value="停止" id="stop2">
    <input type="button" value="停止" id="stop3">
    <input type="button" value="停止" id="stop4">
</div>
网上有害信息举报专区：中国互联网违法和不良信息举报中心 <br>Copyright 2021- LiuXingyang page2.cn All Rights Reserved |备案号：粤ICP备12009483号-9（属黑龙江）

<script>
    function zy$(id) {
        return document.getElementById(id)
    };

    //一个
    var tdO = zy$("all").getElementsByClassName("name");
    //循环遍历每个td
    for (var i = 0; i < tdO.length; i++) {
        //注册点击事件，添加事件处理函数
        var timeId1 = "";
        zy$("only").onclick = function() {
            clearInterval(timeId1);
            timeId1 = setInterval(function() {
                //刷一遍
                for (var j = 0; j < tdO.length; j++) {
                    tdO[j].style.backgroundColor = "rgba(255,192,203,.5)";
                }
                //产生随机数
                var result1 = parseInt(Math.random() * tdO.length);
                tdO[result1].style.backgroundColor = "yellow";
                zy$("stop1").onclick = function() {
                    clearInterval(timeId1);
                }
            }, 200)
        };
    }

    //男生
    var tdbO = document.getElementsByClassName("boy");
    //循环遍历每个td
    for (var i = 0; i < tdbO.length; i++) {
        //注册点击事件，添加事件处理函数
        var timeId2 = "";
        zy$("boy").onclick = function() {
            clearInterval(timeId2);
            timeId2 = setInterval(function() {
                //刷一遍
                for (var j = 0; j < tdbO.length; j++) {
                    tdbO[j].style.backgroundColor = "rgba(255,192,203,.5)";
                }
                //产生随机数
                var result1 = parseInt(Math.random() * tdbO.length);
                tdbO[result1].style.backgroundColor = "yellow";
                zy$("stop2").onclick = function() {
                    clearInterval(timeId2);
                }
            }, 200)
        };
    }

    //女生
    var tdgO = document.getElementsByClassName("girl");
    //循环遍历每个td
    for (var i = 0; i < tdgO.length; i++) {
        //注册点击事件，添加事件处理函数
        var timeId3 = "";
        zy$("girl").onclick = function() {
            clearInterval(timeId3);
            timeId3 = setInterval(function() {
                //刷一遍
                for (var j = 0; j < tdgO.length; j++) {
                    tdgO[j].style.backgroundColor = "rgba(255,192,203,.5)";
                }
                //产生随机数
                var result1 = parseInt(Math.random() * tdgO.length);
                tdgO[result1].style.backgroundColor = "yellow";
                zy$("stop3").onclick = function() {
                    clearInterval(timeId3);
                }
            }, 200)
        };
    }

    //一组
    var trO = zy$("all").getElementsByTagName("tr");
    //循环遍历每个tr
    for (var i = 0; i < trO.length; i++) {
        trO[i].setAttribute("index2", i);
        var timeId4 = "";
        //注册点击事件，添加事件处理函数
        zy$("group").onclick = function() {
            clearInterval(timeId4)
            timeId4 = setInterval(function() {
                for (var j = 0; j < trO.length; j++) {
                    trO[j].style.backgroundColor = "rgba(255,192,203,.5)";
                }
                var result2 = parseInt(Math.random() * trO.length);
                trO[result2].style.backgroundColor = "yellow";
                zy$("stop4").onclick = function() {
                    clearInterval(timeId4);
                }
            }, 200)
        };

    }
</script>

</body>
</html>
